<template>
	<view :style="'padding-top:'+(CustomBar+44)+'px'">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{navTitle}}</block>
		</cu-custom>
		<view class="container">
			<view class="filter-content" :style="'top:'+CustomBar+'px'">
				<view @click='showSlideFun' data-type="type">
					<view>{{NowType.industry_name}}</view>
					<!-- <text>(共{{allShopsNum}}家)</text> -->
					<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/icon_select.svg"></image>
				</view>
				<view @click='showSlideFun' data-type="site">
					<view>{{NowSite.region_name}}</view>
					<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/icon_select.svg"></image>
				</view>
				<!-- <view class="">
					地图模式
				</view> -->
			</view>

			<view class="home">
				<shop-item v-for="(item,index) in list_data" :key="index" :item="item" :padding="'padding-left:12px;padding-right:12px'"></shop-item>
				<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了~</tui-divider>
			</view>
			<no-content :showType="'shops'" v-if='noContentShow'></no-content>
		</view>
		<view class="slide-content" :style='background' v-if='showSlide' @click="restValue"></view>
		<view class="write-shows" :style='"bottom:"+bottom'>
			<view class="title">
				<view @click='restValue'>取消</view>
				<view>{{isType=='type'?'商铺分类':'区域'}}</view>
			</view>
			<view class="showList">
				<view v-for="(item,index) in showList" :key="index" :class="[(NowType.id==item.id | NowSite.region_id == item.region_id) ?'active':'']"
				 @click='changeIndex(isType=="type"?item.id:item.region_id)'>{{isType=='type'?item.industry_name:item.region_name}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import shopItem from '../component/shopItem.vue'
	import noContent from '../component/noContent.vue'
	import tuiDivider from "../component/divider.vue"
	export default {
		components: {
			shopItem,
			noContent,
			tuiDivider
		},
		data() {
			return {
				totalNum: "",
				list_data: [],
				num: '',
				typeList: [],
				sortId: '',
				isfilter: false,
				typeName: '附近',
				page: 1,
				pageSize: 7,
				pageCount: 1,
				showIn: false,
				scrollLeft: 0,
				// 当前区和当前分类
				NowType: {},
				NowSite: {},
				background: 'background: rgba(0, 0, 0, .2)',
				showSlide: false,
				bottom: '-670rpx',
				isSponsor: true,
				isType: '',
				coordinate: {},
				allShopsNum: 0,
				showList: [],
				noContentShow: false,
				navTitle: '',
				CustomBar: this.CustomBar,
				noMore: false,
			}
		},
		onLoad: function(options) {
			var that = this;
			that.typeId = options.typeId ? options.typeId : "1"
			this.coordinate = uni.getStorageSync('coordinate')
			Promise.all([that.getTypeNew(), that.getAreaNew()]).then((result) => {
				var status = result.filter(item => item.data.status != 1)
				if (status.length == 0) {
					that.getInfo()
				} else {
					uni.showToast({
						title: '网络有误',
						icon: 'none'
					})
				}
			}).catch((error) => {
				console.log(error)
			})
		},
		created() {},
		methods: {
			changeFilter(e) {
				console.log(e)
			},
			restValue() {
				var that = this
				that.background = 'background: rgba(0, 0, 0, .2)'
				that.bottom = '-670rpx'
				setTimeout(function() {
					that.showSlide = false
				}, 500)
			},

			search() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},

			nav(e) {
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url,
					})
				}
			},

			getTypeNew() {
				var that = this
				var typeId = this.typeId;
				return new Promise(function(resolve, reject) {
					that.$request({
						url: '/Categorys/getLists',
						data: {},
						success: res => {
							if (res.data.status == 1) {
								if (typeId != '') {
									var NowType = res.data.data.filter(item => item.id == typeId)
									that.typeList = res.data.data
									that.NowType = NowType[0]
									that.navTitle = NowType[0].industry_name
								} else {
									that.typeList = res.data.data
									that.NowType = NowType[7]
									that.navTitle = res.data.data[7].industry_name
								}
								resolve(res) //在异步操作成功时调用
							} else {
								reject(res); //在异步操作失败时调用
							}
						},
						fail: (e) => {
							uni.showToast({
								title: e.message,
								icon: 'none'
							})
							reject(e); //在异步操作失败时调用
						},
						complete: () => {}
					});
				})
			},

			getAreaNew() {
				var that = this
				var params = {};
				return new Promise(function(resolve, reject) {
					that.$request({
						url: '/BaseRegion/getAreaByLocation',
						data: {
							lat: that.coordinate.latitude,
							lng: that.coordinate.longitude
						},
						success: res => {
							if (res.data.status == 1) {
								res.data.data.unshift({
									region_id: '-999999999',
									region_name: "全城"
								})
								var site = res.data.data[0]
								that.areaList = res.data.data
								that.NowSite = site
								resolve(res) //在异步操作成功时调用
							} else {
								reject(res); //在异步操作失败时调用
							}
						},
						fail: (e) => {
							uni.showToast({
								title: e.message,
								icon: 'none'
							})
							reject(d); //在异步操作失败时调用
						},
						complete: () => {}
					});
				})
			},

			showSlideFun(e) {
				var type = e.currentTarget.dataset.type,
					that = this
				switch (type) {
					case "type":
						that.showList = that.typeList
						break
					case "site":
						that.showList = that.areaList
						break
				}

				that.isType = type
				that.showSlide = true
				setTimeout(function() {
					that.background = 'background: rgba(0, 0, 0, .4)'
					that.bottom = '0rpx'
				}, 10)
			},

			changeIndex(nowId) {
				var type = this.isType,
					that = this
				switch (type) {
					case "type":
						var item = that.typeList.filter(item => item.id == nowId)
						that.NowType = item[0]
						that.navTitle = item[0].industry_name
						break
					case "site":
						var item = that.areaList.filter(item => item.region_id == nowId)
						that.NowSite = item[0]
						break
				}
				// 更换索引，重新请求
				that.background = 'background: rgba(0, 0, 0, .2)';
				that.bottom = '-670rpx';
				that.page = 1;
				that.getInfo()
				setTimeout(function() {
					that.showSlide = false
				}, 500)
			},

			getInfo() {
				var that = this;
				that.$request({
					url: '/shop/nearbyBusinessNew',
					data: {
						page: that.page,
						latitude: that.coordinate.latitude,
						longitude: that.coordinate.longitude,
						district: that.NowSite.region_id == '-999999999' ? '' : that.NowSite.region_id,
						category_id: that.NowType.id ? that.NowType.id : that.typeId
					},
					success: res => {
						if (res.data.status == 1) {
							var data = res.data.data.shops;
							if (data.length == 0) {
								that.noContentShow = true
								return
							}
							if (data.length > 0) {
								data.forEach((item, index) => {
									if (item.tags != 0) {
										item.tags = item.tags.length > 3 ? item.tags.slice(0, 3) : item.tags
									} else {
										item.tags = []
										item.tags.push(that.NowType.industry_name)
									}
									if (index <= 2) {
										item['top'] = 1
									}
								})
							}
							that.pageCount = res.data.data.pageCount
							that.totalNum = res.data.data.totalNum
							that.allShopsNum = res.data.data.shop_num
							that.list_data = data
							that.page++
						}
					},
					fail: (e) => {
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
						reject(d); //在异步操作失败时调用
					},
					complete: () => {}
				});
			},
		},

		onReachBottom() {
			var that = this;
			if (that.page > that.pageCount) {
				that.noMore = true
				return
			}

			that.$request({
				url: '/shop/nearbyBusinessNew',
				data: {
					page: that.page,
					latitude: that.coordinate.latitude,
					longitude: that.coordinate.longitude,
					district: that.NowSite.region_id == '-999999999' ? '' : that.NowSite.region_id,
					category_id: that.NowType.id ? that.NowType.id : that.typeId
				},
				success: res => {
					if (res.data.status == 1) {
						var data = res.data.data.shops
						var listData = that.list_data
						data.forEach(item => {
							if (item.tags != 0) {
								item.tags = item.tags.length > 3 ? item.tags.slice(0, 3) : item.tags
							} else {
								item.tags = []
								item.tags.push(that.NowType.industry_name)
							}
							listData.push(item)
						})
						that.list_data = listData
						that.page++
					}
				},
				fail: (e) => {
					uni.showToast({
						title: e.message,
						icon: 'none'
					})
				},
				complete: () => {}
			});
		}

	}
</script>

<style>
	page,
	.container {
		background: #fff;
	}

	/* 搜索 */

	.header {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		height: 100rpx;
		width: 100%;
		padding: 0 20rpx;
	}

	.search {
		flex: 1;
		height: 60rpx;
		background: #f3f3f3;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-radius: 30rpx;
		padding: 0 20rpx;
	}

	.placeholder {
		color: #999;
		font-size: 26rpx;
	}

	.search .icon {
		width: 35rpx;
		height: 40rpx;
	}

	.search input {
		flex: 1;
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	.filter-content {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		background: #fff;
		z-index: 1;
		border-bottom: solid 1rpx #efefef;
	}

	.filter-content>view {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.filter-content>view text {
		color: #999;
		font-size: 24rpx;
	}

	.filter-content>view:nth-child(1) {
		border-right: none;
		border-radius: 8rpx 0 0 8rpx;
		color: #333;
		font-size: 28rpx;
	}

	.filter-content>view:nth-child(2) {
		border-right: none;
		border-radius: 0 8rpx 8rpx 0;
		color: #333;
		font-size: 28rpx;
	}

	.filter-content>view:nth-child(1) .active {
		color: #3080e8;
	}

	.filter-content>view image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
		margin-top: 5rpx;
	}


	.home {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		background: #fff;
	}

	.list-top {
		line-height: 90rpx;
		text-align: center;
		width: 100%;
		color: #333;
		font-size: 35rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		font-weight: bold;
		border-bottom: solid 1rpx #f2f2f2;
	}



	.slide-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		transition: all 1s;
		z-index: 9;
		overflow-y: hidden;
		z-index: 1;
	}

	.write-shows {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 670rpx;
		background: #fff;
		transition: all 0.5s;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		z-index: 2;
	}

	.write-shows .title {
		height: 56rpx;
		position: relative;
		margin: 33rpx 0 53rpx 0;
	}

	.write-shows .title>view:nth-child(1) {
		position: absolute;
		left: 30rpx;
		top: 0;
		width: 100rpx;
		height: 56rpx;
		border-radius: 10rpx;
		color: #999;
		font-size: 28rpx;
		line-height: 56rpx;
		text-align: center;
	}

	.write-shows .title>view:nth-child(2) {
		text-align: center;
		line-height: 56rpx;
		color: #333;
		height: 32rpx;
	}

	.write-shows .title>view:nth-child(3) {
		position: absolute;
		right: 30rpx;
		top: 0;
		width: 100rpx;
		height: 56rpx;
		background-color: #f34930;
		border-radius: 10rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
	}

	.showList {
		flex: 1;
		width: 100%;
		overflow-y: auto;
	}

	.showList>view {
		height: 85rpx;
		text-align: center;
		line-height: 85rpx;
		font-size: 32rpx;
		color: #666;
	}

	.showList .active {
		color: #f34930;
		background: url('http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/f5f09ac949b1b396c32c1abd4b297cc.png') no-repeat;
		background-size: 13rpx 24rpx;
		background-position: 32rpx 50%;
	}

	.list-top {
		line-height: 90rpx;
		text-align: center;
		width: 100%;
		color: #333;
		font-size: 35rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		font-weight: bold;
		border-bottom: solid 1rpx #f2f2f2;
	}

	.no-content {
		/* height: 100rpx; */
		text-align: center;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx
	}

	.no-content image {
		width: 360rpx;
		height: 360rpx;
		margin-bottom: 20rpx;
	}

	.no-content text {
		font-size: 30rpx;
		color: #333;
		line-height: 40rpx;
	}
</style>
